import React, { PureComponent } from 'react';
import { TableC, FirstHeaderC, PrimaryC, DATA_ENTRY, AdvancedSearch } from '../../comps';
import { Popconfirm } from 'antd';
import accounting from 'accounting';
import { VTComponents, VTScroll } from 'virtualizedtableforantd';
import config from '../../utils/tableMoreIdConfig';
import uuid from 'es6-uuid';
const { tableDemo: tableDemo } = config;
class TestTableCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [{ title: '产品', key: 'name', align: 'left' }],
      columns1: [{ title: '资产类别', key: 'assetClass', align: 'left' }],
      columns2: [
        { title: '证券代码', key: 'height' },
        { title: '证券名称', key: 'nam1e' },
        { title: '交易所', key: 'code' },
      ],
      dataSource: [],
    };
  }
  jsonToArray(nodes, arr) {
    if (Array.isArray(nodes)) {
      for (var i = 0, l = nodes.length; i < l; i++) {
        arr.push(nodes[i].key); // 取每项数据放入一个新数组
        if (Array.isArray(nodes[i]['children']) && nodes[i]['children'].length > 0)
          // 若存在children则递归调用，
          this.jsonToArray(nodes[i]['children'], arr);
      }
    }
  }
  onClick = () => {
    const data = [];
    for (let i = 0; i < 10; ++i) {
      let children = [];
      for (let j = 0; j < 5; j++) {
        let sonof = [];
        for (let K = 0; K < 1000; K++) {
          sonof.push({
            key: `${i}_${j}_${K}`,
            height: K,
          });
        }
        children.push({
          key: `${i}_${j}`,
          assetClass: 'ZQ',
          child: sonof,
        });
      }
      data.push({
        key: i,
        name: i,
        child: children,
      });
    }
    // var data1=[]
    // this.jsonToArray(data,data1)
    this.setState({
      // expandedRowKeys:[...data1],
      tableKey: uuid(32),
      dataSource: [...data],
    });
  };
  componentDidMount() {
    // this.onClick()
  }
  onExpand = (expanded, record) => {};
  expandedRowRender = (record, flag) => {
    if (record.child && record.child.length) {
      if (flag == 'flag') {
        return (
          <TableC
            columns={this.state.columns2}
            key={this.state.tableKey}
            defaultExpandAllRows={true}
            dataSource={record.child || []}
            scroll={{ y: 200 }} //必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
            components={VTComponents({ id: tableDemo + record.key, destroy: true })} //id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。
            rowKey='key'
            hidePage={true}
          />
        );
      } else {
        return (
          <TableC
            columns={this.state.columns1}
            key={this.state.tableKey}
            defaultExpandAllRows={true}
            dataSource={record.child || []}
            expandedRowRender={(record) => this.expandedRowRender(record, 'flag')} //递归调用
            rowKey='key'
            hidePage={true}
          />
        );
      }
    }
  };

  render() {
    return (
      <div>
        <PrimaryC onClick={this.onClick} title='查询' style={{ marginBottom: '20px' }} />
        <p>数据量要小于1万条 否则报错 必须设置滚动高度 scroll.y;VTComponents( 设置id, destroy) id必须是number类型且唯一，并且在专门的配置文件里配置</p>
        <TableC
          key={this.state.tableKey}
          defaultExpandAllRows={true}
          columns={this.state.columns}
          dataSource={this.state.dataSource}
          hidePage={true}
          //  scroll={{y:500}}//必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
          //  components={VTComponents({ id: tableDemo,
          //     destroy:true
          // })}//id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。
          rowKey={'key'}
          expandedRowRender={this.expandedRowRender}
          // onExpand={this.onExpand}
        />
      </div>
    );
  }
}
export default TestTableCDemo;
